<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>核酸检验库（扫码）</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="./static/elementui.css">
</head>
<body>
    <div id="app">

        <el-row type="flex" justify="center">
            <el-col :span="3"></el-col>
            <el-col :span="18">
                <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-menu-item index="4">核酸检验库（扫码）</el-menu-item>
                    <el-menu-item index="1"  @click="changeTab(1)">核酸检验库（表格）</el-menu-item>
                    <el-menu-item index="2" @click="changeTab(2)">常住人口库</el-menu-item>
                    <el-menu-item index="3" @click="changeTab(3)">核酸/常住信息比对</el-menu-item>
                    <el-menu-item index="5" @click="changeTab(5)">配置</el-menu-item>
                </el-menu>

                <el-row style="padding-top:10px;">
                    <span v-if="type == 'all'">全部</span>
                    <span v-else-if="type == 'out'">非常住</span>
                    <span v-else>重复</span>
                    <el-button icon="el-icon-refresh" @click="refresh"></el-button>
                    <!-- <el-button type="primary" plain>新增</el-button> -->
                    <!-- <el-upload action="./upload/" :before-upload="uploadProgess" :on-progress="uploadProgess" :on-success="uploadSuccess" :show-file-list="false" style="display: inline-block;">
                        <el-button type="success" plain v-loading="uploading">导入</el-button>
                    </el-upload> -->
                    <!-- <el-button type="primary" plain @click="exportAll" v-loading="uploadingAll">导出总表</el-button> -->
                    <el-button type="info" plain @click="checkRepeat" v-loading="loadingCheckRepeat">筛查重复人员</el-button>
                    <el-button type="info" plain @click="exportRepeat" v-loading="uploadingRepeat">导出重复人员</el-button>
                    <el-button type="warning" plain @click="deleteRepeat" v-loading="loadingDeleteRepeat">一键清理重复人员</el-button>
                    <el-button type="danger" plain @click="delRow">删除选中人员</el-button>
                    <el-button type="info" plain @click="updateNatOut" v-loading="loadingNatOut">更新非常住人员</el-button>
                    <el-button type="info" plain @click="exportNatOut" v-loading="loadingExportNatOut">导出非常住人员</el-button>
                    <el-button type="danger" @click="delAll" style="float: right;">清空</el-button>
                </el-row>

                <el-row type="flex" style="padding-top:10px;">
                    <el-col :span="10">
                        <el-input placeholder="请输入姓名、证件号码或联系方式" v-model="keyword" class="input-with-select">
                            <el-select v-model="selTown" slot="prepend" placeholder="请选择" style="width:130px;">
                                <el-option label="全部乡镇" value=""></el-option>
                                <el-option v-for="item in towns" :label="item['town']" :value="item['town']"></el-option>
                            </el-select>
                            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                        </el-input>
                    </el-col>
                </el-row>

                <el-table v-loading="loadingTable" max-height="600" ref="multipleTable" empty-text="没有数据" :data="tableData" @selection-change="handleSelectionChange" border stripe style="width: 100%;margin-top:10px;">
                    <el-table-column type="selection" prop="id" width="55"></el-table-column>
                    <el-table-column prop="nums" label="序号" width="100"></el-table-column>
                    <el-table-column prop="town" label="所属乡镇" width="120"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="100"></el-table-column>
                    <el-table-column prop="card" label="证件号码" width="200"></el-table-column>
                    <el-table-column prop="link" label="联系方式" width="200"></el-table-column>
                    <el-table-column prop="addr" label="常住地址"></el-table-column>
                    <el-table-column prop="create_date" label="扫码时间" width="200"></el-table-column>
                </el-table>
                <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page.sync="page" :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="pageSize" background
                    layout="sizes, total, prev, pager, next"
                    :total="count" style="padding-top:10px;float:right;">
                </el-pagination>
            </el-col>
            <el-col :span="3"></el-col>
        </el-row>

        <el-dialog title="身份证错误" :visible.sync="dialogTableVisible">
            <div>{{errsMsg}}</div>
        </el-dialog>
    </div>

    <!-- import Vue before Element -->
    <script src="./static/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="./static/elementui.js"></script>
    <!-- import axios -->
    <script src="./static/axios.min.js"></script>
    <!-- import cookie -->
    <script src="./static/js.cookie.min.js"></script>
    <script>
        new Vue({
          el: '#app',
          data: function() {
            return {
                activeIndex2: '4',

                selTown: "",
                keyword: "",
                towns: [],

                tableData: [],
                multipleSelection: [],

                page: 1,
                pageSize: 10,
                type: 'all',
                count: 0,

                uploading: false,
                dialogTableVisible: false,
                errsMsg: '',

                uploadingAll: false,
                uploadingRepeat: false,
                loadingTable: false,
                loadingDeleteRepeat: false,
                loadingCheckRepeat: false,
                loadingNatOut: false,
                loadingExportNatOut: false
            }
          },
          created() {
              console.log('login', Cookies.get('login'))
              if(Cookies.get('login') != 'true') {
                  window.location.href = './login.html'
              } else {
                this.getList()
                this.getTownList()
              }
          },
          methods: {
              changeTab(type) {
                //   console.log(type);
                  if(type == 2) {
                    window.location.href = "./pop.html"
                  } else if(type == 3) {
                    window.location.href = "./compare.html"
                  } else if(type == 5) {
                    window.location.href = "./setting.html"
                  } else {
                    window.location.href = "./index.html"
                  }
              },
              search() {
                  this.getList()
              },
              handleCurrentChange(e) {
                  console.log(e)
                  this.getList()
              },
              handleSizeChange(val) {
                  this.pageSize = val
                  this.getList()
              },
              handleSelect(key, keyPath) {
                  console.log(key, keyPath)
              },
              handleSelectionChange(val) {
                  this.multipleSelection = val
              },
              refresh() {
                  this.type = 'all'
                  this.page = 1
                  this.getList()
                  this.getTownList()
              },
              exportAll() {
                this.uploadingAll = true
                axios.get('/export_nat_town').then((res) => {
                    this.uploadingAll = false
                    console.log(res.data.url)
                    // window.open(res.data.url)
                    window.location.href = res.data.url
                })
              },
              exportRepeat() {
                this.uploadingRepeat = true
                axios.get('/export_code_repeat_excel').then((res) => {
                    this.uploadingRepeat = false
                    console.log(res.data)
                    window.location.href = res.data.url
                })
              },
              exportNatOut() {
                this.loadingExportNatOut = true
                axios.get('/export_code_out').then((res) => {
                    this.loadingExportNatOut = false
                    console.log(res.data)
                    window.location.href = res.data.url
                })
              },
              getList() {
                this.loadingTable = true
                axios.get('/get_code_list', {
                    params: {
                        type: this.type,
                        page: this.page,
                        pageSize: this.pageSize,
                        town: this.selTown,
                        keyword: this.keyword
                    }
                }).then((res) => {
                    this.loadingCheckRepeat = false
                    this.loadingTable = false
                    console.log(res)
                    let data = res.data
                    if(data.code == 1) {
                        this.tableData = data.list
                        this.count = data.count
                    }
                })
              },
              getTownList() {
                axios.get('/get_code_town_list').then((res) => {
                    let data = res.data
                    if(data.code == 1) {
                        this.towns = data.towns
                    }
                })
              },
              checkRepeat() {
                  this.loadingCheckRepeat = true
                  this.type = 'repeat'
                  this.getList()
              },
              uploadProgess() {
                  this.uploading = true
              },
              uploadSuccess(res) {
                  this.uploading = false

                  if(res.code == 2) {
                    this.$message({message: '导入失败！', type: 'error'})
                    // this.dialogTableVisible = true
                    // this.errsMsg = res.errs
                  } else {
                    this.$message({message: '导入成功！', type: 'success'})
                    this.refresh()
                  }
              },
              updateNatOut() {
                this.loadingNatOut = true
                axios.get('/update_code_out').then((res) => {
                    this.loadingNatOut = false
                    console.log(res)
                    let data = res.data
                    if(data.code == 1) {
                        this.$message('更新成功！')
                        this.page = 1
                        this.type = 'out'
                        this.getList()
                    }
                })
              },
              deleteRepeat() {
                this.loadingDeleteRepeat = true
                axios.get('/delete_code_repeat').then((res) => {
                    this.loadingDeleteRepeat = false
                    console.log(res)
                    let data = res.data
                    if(data.code == 1) {
                        this.$message('一键删除重复成功！')
                        this.page = 1
                        this.getList()
                    }
                })
              },
              delRow() {
                  let list = this.multipleSelection
                  console.log(this.multipleSelection)
                  if(list.length > 0) {
                      let dels = '0'
                      list.forEach(e => {
                          dels += ',' + e.id
                      })

                      axios.get('/delete_code', {
                        params: {
                            dels: dels
                        }
                      }).then((res) => {
                        let data = res.data
                        if(data.code == 1) {
                            this.$message('删除成功！')
                            this.getList()
                        } else {
                            this.$message('删除失败！')
                        }
                      })

                      console.log(dels)
                  } else {
                    this.$message({message: '没有勾选删除行！', type: 'warning'})
                  }
              },
              delAll() {
                this.$confirm('此操作将永久删除核酸检测库所有数据, 是否继续?', '清空确认', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get('/delete_code_all').then((res) => {
                        let data = res.data
                        if(data.code == 1) {
                            this.$message('清空成功！')
                            this.getList()
                        } else {
                            this.$message('清空失败！')
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消清空'
                    });  
                });
              },
              changePage(type) {
                  if(type == 'up') {
                      if(this.page > 2) {
                          this.page--
                      }
                  } else {
                      this.page++
                  }
                  this.getList()
              },
          },
        })
    </script>
</body>
</html>